import { createStore } from "vuex";
import Cookies from "js-cookie";
import router from "../router";
export default createStore({
  // state=全局data
  state: {
    websocketClose: false,
    // 收缩侧边栏
    isCollapse: true,
    isClosePage: false,
    currentMenu: null,
    tabsList: [
      {
        path: "/",
        name: "home",
        label: "首页",
        icon: "home",
      },
    ],
    websocketData: null,
    // 后端返回菜单
    menu: [],
    token: "",
  },
  // 操作data的方法
  mutations: {
    //侧边栏收房
    updateIsCollapse(state, payload) {
      // console.log(payload);
      state.isCollapse = !state.isCollapse;
    },
    //面包屑，看herder、aside页面
    selectMenu(state, val) {
      // 如果是home页面面包屑就不变
      if (val.name == "home") {
        //currentMenu就是菜单栏里的对象
        state.currentMenu = null;
      } else {
        state.currentMenu = val;
        //找到tabsList是否已经有了当前页面，没有则新增，这里是tags处理
        let result = state.tabsList.findIndex((item) => item.name === val.name);
        //索引-1，代表没有符合条件的索引拿出
        result == -1 ? state.tabsList.push(val) : "";
      }
    },
    //删除tag标签
    closeTab(state, val) {
      let res = state.tabsList.findIndex((item) => {
        return item.name === val.name;
      });
      //删除
      if (res !== -1) {
        state.tabsList.splice(res, 1);
      }
    },
    //同步赋值给websocketData
    setWebsocketData(state, data) {
      // console.log(data);
      state.websocketData = data;
    },
    setwebsocketClose(state, data) {
      state.websocketClose = data;
    },
    setisClosePage(state, data) {
      state.isClosePage = data;
    },
    // 获取到的菜单持久化到localStorage
    setMenu(state, data) {
      state.menu = data;
      localStorage.setItem("menu", JSON.stringify(data));
    },
    // // vuex菜单数据持久化并且实现动态路由，每次页面刷新加载都会先执行
    // addMenu(state, router) {
    //   // 先取本地数据，取不到说明没登录就返回
    //   if (!localStorage.getItem("menu")) {
    //     return;
    //   }
    //   // 将菜单数据赋值给menu
    //   const menu = JSON.parse(localStorage.getItem("menu"));
    //   console.log(
    //     "%c [ menu ]-80",
    //     "font-size:13px; background:pink; color:#bf2c9f;",
    //     menu
    //   );
    //   state.menu = menu;
    //   // 动态路由
    //   // const modules = import.meta.glob("../views/*/*.vue");
    //   const menuArray = [];
    //   menu.forEach((item) => {
    //     // 有子路由
    //     // item.children.lenght > 0)
    //     if (item.children !== null) {
    //       item.children = item.children.map((childItem) => {
    //         let url = `../views/${childItem.url}.vue`;
    //         // 添加路由路径属性
    //         childItem.component = () => import(/* @vite-ignore */ url);
    //         //设置路由是否缓存
    //         childItem.meta = {
    //           keepAlive: childItem.keepAlive === 1 ? true : false,
    //         };
    //         return childItem;
    //       });
    //       menuArray.push(...item.children);
    //     } else {
    //       let url = `../views/${item.url}.vue`;
    //       // 添加路由路径属性
    //       item.component = () => import(/* @vite-ignore */ url);
    //       //设置路由是否缓存
    //       item.meta = {
    //         keepAlive: item.keepAlive === 1 ? true : false,
    //       };
    //       menuArray.push(item);
    //     }
    //   });

    //   menuArray.forEach((item) => {
    //     router.addRoute("main", item);
    //   });
    // },
    addMenu(state, router) {
      //   // 先取本地数据，取不到说明没登录就返回
      if (!localStorage.getItem("menu")) {
        return;
      }
      // 从本地存储中获取菜单数据
      const menu = JSON.parse(localStorage.getItem("menu"));
      state.menu = menu;

      // 定义递归函数来处理菜单数据并配置路由
      const recursiveRoute = (menuItems) => {
        return new Promise((resolve, reject) => {
          menuItems.forEach((item) => {
            // import需要加/* @vite-ignore */ 来避免vite打包时将该路径下的文件打包进去，并且url需要在外配好
            let url = `../views/${item.url}.vue`;
            //配置动态路由
            let route = {
              name: item.name,
              path: item.path,
              component: () => import(/* @vite-ignore */ url),
              meta: {
                keepAlive: item.keepAlive === 1 ? true : false,
              },
            };

            if (item.children && item.children.length > 0) {
              route.children = [];
              recursiveRoute(item.children).then(() => {
                resolve();
              });
            }
            //添加路由到路由配置
            router.addRoute("main", route);
          });
        });
      };

      // 调用递归函数开始处理菜单数据并配置路由
      recursiveRoute(menu);
    },
    // 退出时清空
    clearMenu(state) {
      state.menu = [];
      localStorage.removeItem("menu");
    },
    // 登录后token存储
    setToken(state, data) {
      state.token = data;
      Cookies.set("token", data);
    },
    // 清除token
    clearToken(state) {
      state.token = "";
      Cookies.remove("token");
    },
    // 跳转前先获取token
    getToken(state) {
      // 先获取vuex本身的token，如果没有从登录时存入的cookie中拿，为了路由守卫页面跳转前拿到token
      state.token = state.token || Cookies.get("token");
    },
  },
  //实时接收的数据异步赋值给websocketData
  actions: {
    updateWebsocketData({ commit }, data) {
      commit("setWebsocketData", data);
    },
  },
  getters: {
    getWebsocketData(state) {
      return state.websocketData;
    },
  },
});
